<template>
    <div class="comp">
        <!-- 图表展示区域 -->
       <div class="chart" ref="broken"></div>
    </div>
</template>

<script>
import mixinData from "../utils/mixin.js"
export default {
    // 混入
    mixins:[mixinData],
    methods:{
        // 1.获取echarts实例  设置基础的静态配置项绘制基础图表
        initEcharts(){
            // 1.1 获取echarts实例
            this.echartsInstance = this.$echarts.init(this.$refs.broken,this.themeName)
            // 1.2 设置基础的静态配置
            let initOptions={
                // 标题
                title:{
                    text:"▍农作物种植生长趋势",
                    top:"3%",
                    left:"3%"
                },
                // 图例
                legend:{
                    show:true,
                    icon:"circle",
                    top:"12%",
                    left:"3%"
                },
                // 坐标系
                grid:{
                    // show:true,
                    top:"20%",
                    left:"3%",
                    right:"3%",
                    bottom:"3%",
                    containLabel:true
                },
                // 提示语
                tooltip:{
                    show:true,
                    trigger:'axis',
                    axisPointer:{
                       type:"cross"
                    }
                },
                // x
                xAxis:{
                    type:"category",
                },
                // y
                yAxis:{
                    type:"value",
                    axisLine:{
                        show:true
                    }
                }
            }
            // 1.3 绘制基础图表
            this.echartsInstance.setOption(initOptions)
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('CropGrowthTrend')
            this.allData = data;console.log(data);
            // 根据数据继续绘制图表
            this.setEcharts()
        },
        // 3.根据数据继续绘制图表
        setEcharts(){
            // 3.1组装类目轴数据（1-12）
            let categoryData = this.allData[0].content.map(item=>item.month)

            // 3.2组装系列数据 [{type,data},{},{}...]
            let seriesData = this.allData.map(item=>{
                let datas =  item.content.map(m=>m.area)
                return {
                    name:item.city,
                    type:"line",
                    data:datas,
                    stack:{},//堆叠配置
                    smooth:true,//设置圆滑曲线
                    areaStyle: {}
                }
            })

            // console.log(seriesData)

            // 3.3生成配置项
            let setOptions={
                // x
                xAxis:{
                    data:categoryData
                },
                // 系列
                series:seriesData
            }

            // 3.4绘制图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.适配方法
        Adaptive(){

            // 获取一个比例尺
            let width = this.$refs.broken.offsetWidth;
            // 3.5-3.7
            let scale = width/100*3.6

            // 根据比例尺动态设置标题
            let updateOptions={
                // 标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                },
                // 图例
                legend:{
                   itemGap:scale/2,
                   itemWidth:scale/2,
                   itemHeight:scale/2
                }
            }

            // 使用动态配置绘图
            this.echartsInstance.setOption(updateOptions)

            // 只是赋值坐标系内部的图表大小适配
            this.echartsInstance.resize();
        }
    },
    mounted(){
        // 1.获取echarts实例 
        this.initEcharts()
        // 2.获取业务数据
        this.getData()
        // 3.监听窗口变化
        window.addEventListener('resize',this.Adaptive)
        // 4.使用适配方法
        this.Adaptive()
    },
    destroyed(){
        // 移除窗口监听 防止内存泄露
        window.removeEventListener('resize',this.Adaptive)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
